/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Navigator
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/FontAwesome';
//导入外部组件
var LazyHome = require('../Home/LazyHome'); //home
var LazyFind = require('../Find/LazyFind/LazyFind'); //find
var LazyMine = require('../Mine/LazyMine'); //mine

//测试跳转
var LazyFoods = require('../Foods/LazyFoods'); //LazyFoods
var LazyMain = React.createClass({
    getInitialState(){
      return {
          selectedTab:'find',
          tabBarHeight:null
      }
    },
    render() {
        return (
            <TabNavigator
                tabBarStyle={{ height: this.state.tabBarHeight, overflow: 'hidden' }}
                sceneStyle={{ paddingBottom: this.state.tabBarHeight }}
            >
                {this.tabRender('首页','home','home-default','home-selected',LazyHome)}
                {this.tabRender('发现','find','find-default','find-selected',LazyFoods)}
                {this.tabRender('订单','order','order-default','order-selected',LazyFind)}
                {this.tabRender('我的','mine','mine-default','mine-selected',LazyMine)}
            </TabNavigator>
        );
    },
    tabRender(title,selectName,renderIcon,renderSelectedIcon,component){
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectName}
                title={title}
                // badgeText = '1'
                titleStyle={{color:'#8a8a8a'}}
                selectedTitleStyle={{color:'#08c8c1'}}
                renderIcon={() => <Image source={{uri:renderIcon}} style={styles.iconStyle}/>}
                renderSelectedIcon={() => <Image source={{uri:renderSelectedIcon}} style={styles.iconStyle}/>}
                onPress={() => this.setState({ selectedTab: selectName })}>
                <Navigator
                           initialRoute={{component:component,passProps:{id:'1'}}}
                           configureScene={(route) => {
                               return Navigator.SceneConfigs.FloatFromRight;
                           }}

                           renderScene={(route, navigator) => {
                               let Component = route.component;
                               return <Component {...route.params} navigator={navigator} _callback={(arg)=>this.hideTabbar(arg)}/>
                           }} />
            </TabNavigator.Item>
        )
    },
    hideTabbar(arg){
        this.setState({
            tabBarHeight:arg
        });
    }
});
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e7fdff',
    },
    iconStyle:{
        width:30,
        height:30,
    }
});
module.exports = LazyMain;